import React, { useImperativeHandle } from 'react';
import PropTypes from 'prop-types';
import { Alert, Avatar, Skeleton, Spin, Tag } from 'antd';
import { useRequest, defaultFormatResult } from '@/hooks';
import { queryEmployeeArchiveHead } from '@/pages/Organization/EmployeeManage/services';
import { createDictionary } from '@/dictionary';
import styles from './index.less';

const workNatureUnitMap = {
    full_time: '全职',
    part_time: '兼职',
    practice: '实习',
    consultant: '顾问',
    temporary: '临时工'
};
const [, getServiceStatusName] = createDictionary('SERVICE_STATUS_DICT');

/**
 * 员工的基本信息面板
 */
const EmployeeCard = React.forwardRef((props, ref) => {
    const { employeeCode, dutyCode, ...otherProps } = props;
    // 用户数据
    const { data: employeeInfoData, error: employeeInfoError, loading: employeeInfoLoading } = useRequest(
        () => queryEmployeeArchiveHead({ employeeCode, dutyCode }),
        {
            cacheKey: `employee-info-${employeeCode}-${dutyCode}`,
            refreshDeps: [employeeCode, dutyCode],
            ready: employeeCode,
            ...defaultFormatResult
        }
    );

    // 数据获取错误处理
    if (employeeInfoError || (!employeeInfoLoading && !employeeInfoData)) {
        return (
            <Alert
                style={{ marginBottom: '20px' }}
                type="error"
                message={employeeInfoError?.msg || '员工数据加载失败'}
            />
        );
    }

    useImperativeHandle(
        ref,
        () => ({
            data: employeeInfoData
        }),
        [employeeInfoData]
    );

    return (
        <Spin spinning={employeeInfoData && employeeInfoLoading}>
            <div className={styles.employeeCard} {...otherProps}>
                {/* 使用 employeeInfoData 做loading 条件, 是想使用缓存, 有缓存信息就直接显示 */}
                <Skeleton loading={!employeeInfoData} active avatar>
                    {employeeInfoData && (
                        <>
                            <div style={{ marginRight: '20px' }}>
                                <Avatar
                                    style={{ border: 'solid 1px #f2f2f2' }}
                                    icon="user"
                                    src={
                                        employeeInfoData.avatarFile && employeeInfoData.avatarFile.length > 0
                                            ? employeeInfoData.avatarFile[0].url
                                            : ''
                                    }
                                    size={74}
                                />
                            </div>
                            <div className={styles.employeeContent}>
                                <div>
                                    <h3 className={styles.employeeName}>{employeeInfoData.employeeName}</h3>
                                    {employeeInfoData.userName && <small>/ {employeeInfoData.userName}</small>}
                                </div>
                                <div className={styles.employeeMeta}>
                                    <div className={styles.employeeMetaItem}>{employeeInfoData.fullDepartmentName}</div>{' '}
                                    -<div className={styles.employeeMetaItem}>{employeeInfoData.dutyAlias}</div>
                                </div>
                                <div className={styles.employeeMeta}>
                                    <Tag>
                                        {employeeInfoData.dutyAlias}/{employeeInfoData.rankValue}
                                    </Tag>
                                    <Tag>{getServiceStatusName(employeeInfoData.serviceStatus)}</Tag>
                                    {employeeInfoData.workNature && (
                                        <Tag>{workNatureUnitMap[employeeInfoData.workNature]}</Tag>
                                    )}
                                </div>
                            </div>
                        </>
                    )}
                </Skeleton>
            </div>
        </Spin>
    );
});

// prop
EmployeeCard.propTypes = {
    employeeCode: PropTypes.string.isRequired,
    dutyCode: PropTypes.string
};

EmployeeCard.defaultProps = {
    dutyCode: null
};

export default React.memo(EmployeeCard);
